<template>
  <div class="w-full h-full flex flex-col items-center bg-#F5F7F8">
    <div class="w-1102px h-[fit-content] flex flex-col">
      <a-breadcrumb class="mt-20px">
        <a-breadcrumb-item><router-link to="/">主页</router-link></a-breadcrumb-item>
        <a-breadcrumb-item>{{ info.nick_name }}</a-breadcrumb-item>
      </a-breadcrumb>
      <UserInfo :info="info" />
      <div class="mt-18px w-1102px flex flex-row justify-between">
        <div class="w-400px flex flex-col">
          <UserImgList :info="info" />
          <GiftCollention />
          <TopSupporters />
        </div>
        <div class="w-684px flex flex-col">
          <div
            class="w-full h-64px flex flex-row items-center bg-white pl-18px rounded-tl-16px rounded-tr-16px"
          >
            <div class="flex flex-row">
              <button class="flex flex-col items-center" @click="activeTitle = 'skills'">
                <div
                  :class="[
                    'text-24px',
                    activeTitle === 'skills' ? 'text-#6B39FF font-bold' : 'text-#8A8C99'
                  ]"
                >
                  技能
                </div>
                <div
                  class="mt-4px w-32px h-6px bg-#6B39FF rounded-3px"
                  v-show="activeTitle == 'skills'"
                ></div>
              </button>
              <button class="ml-40px flex flex-col items-center" @click="activeTitle = 'moment'">
                <div
                  :class="[
                    'text-24px',
                    activeTitle === 'moment' ? 'text-#6B39FF font-bold' : 'text-#8A8C99'
                  ]"
                >
                  动态
                </div>
                <div
                  class="mt-4px w-32px h-6px bg-#6B39FF rounded-3px"
                  v-show="activeTitle == 'moment'"
                ></div>
              </button>
            </div>
          </div>
          <div v-show="activeTitle === 'skills'">
            <Skill :role="info" />
          </div>
          <div v-show="activeTitle === 'moment'">
            <Zone />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// import { useUserStore } from '@/store'
import { useRoute } from 'vue-router'
import { getUserInfoById } from '@/api/user'
import UserInfo from './components/user-info.vue'
import UserImgList from './components/user-imgs.vue'
import GiftCollention from './components/gift-collection.vue'
import TopSupporters from './components/top-supporters.vue'
import Skill from './components/skill.vue'
import Zone from './components/zone.vue'

const route = useRoute()
const userId = Number(route.params.id)
// const userStore = useUserStore()
// const { userInfo } = userStore
const info = ref({
  nick_name: '未知',
  header_img: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
  user_id: '未知',
  role_name: ''
})
getUserInfoById(userId).then((res) => {
  info.value = {
    ...res,
    user_id: res.id
  }
})

const activeTitle = ref('skills')
</script>

<style></style>
